<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
   <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
     
<%@ taglib  prefix="security" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Espace Membre</title>
<c:url  var="css1" value="/css/bootstrap/css/bootstrap.css"></c:url>
	<c:url  var="css2" value="/css/sitemarchand/style.css"></c:url>
	 <link type="text/css" rel="stylesheet" href="${css1 }" />
	  <link type="text/css" rel="stylesheet" href="${css2 }" />
  <link type="text/css" rel="stylesheet" href="<c:url value="/css/htmltools/top.css" /> "/> 
  <c:url  var="css3" value="/css/sitemarchand/view.css"></c:url>
	 <link type="text/css" rel="stylesheet" href="${css3 }" />
</head>
<body>
<div class="tabs_holder">
 <ul>
  <li><a class="tab_selected" href="#mesreservation">Mes reservations</a></li>
  <li ><a href="#moncompte">Mon Compte</a></li>
 </ul>
 <div class="content_holder">
  <div id="mesreservation" class="well">
    <table class="table">
          <caption>
          <h4>liste de vos Réservations</h4>
         
          </caption>
           <thead>
           <tr>
           <th  >date
           </th>
           <th>
          nombre de personnes conviées
           </th>
            
           <th>Menu Reservé</th>
           <th>Etat</th>
           <th>Action</th>
           </tr>
           </thead>
           <tbody>
          <c:forEach items="${mesreservations }" var="reservation">
           <tr>
            <td>${reservation.datereservation}</td> 
              <td> 
              ${reservation.nombredepersonne}
             </td>
             <td> 
             
             <c:set value="${reservation.menureserve }" var="menu" scope="page"></c:set>
             
             <table class="table">
          <caption>
           
         
          </caption>
           <thead>
           <tr>
           <th class="span1">Nom
           </th>
           <th>
           description
           </th>
            
           
           </tr>
           </thead>
           <tbody>
          
           <tr>
            <td>${menu.nom}</td> 
              <td> 
             
             <img class="img-rounded" style="float:left;" src="<c:url value="${menu.image}" />" alt="${menu.nom}"/>
            ${menu.description}<p>
                          
             ${menu.periode }</p>
             
             <p>${menu.prix }
             </p>
             </td>
             
          </tr>
          
          </tbody>
         </table>
             </td>
             <td>
             ${reservation.statusstring }
             </td>
             <td>
             <c:choose>
             
            <c:when test="${ reservation.encours}">
             <a href="<c:url  value="/annulerreservation/${reservation.id }" />" class="btn btn-danger">annuler cette réservation</a>
            
            </c:when>
            <c:when test="${ reservation.annulee}">
            <a href="<c:url  value="/annulerreservation/activerreservation/${reservation.id }" />" class="btn btn-danger">Réactiver cette réservation</a>
            
            </c:when>
            <c:when test="${ reservation.terminee}">
            <a href="<c:url  value="/annulerreservation/activerdenouveau/${reservation.id }" />" class="btn btn-danger">Réserver de Nouveau</a>
            
            </c:when>
              </c:choose>
             </td>
          </tr>
          </c:forEach>
          </tbody>
         </table>
  </div>
  <div id="moncompte">
    <div id="form_container">
	
		 <c:url  value="/modifiercompte" var="url"/>
		<form:form action="${url }"  method="post" modelAttribute="utilisateur">
					<div class="form_description">
			<h2>Inscription</h2>
			 <div class=" btn-danger">${erreurmodification }</div>
		</div>						
			<ul >
			
					<li id="li_1" >
		<form:label cssClass="description" path="username">username </form:label>
		<div>
			<form:input path="username"   cssClass="element text medium" cssErrorClass="btn-danger" autocomplete="false" maxlength="255"/> 
		</div> 
		</li>		<li id="li_2" >
		<form:label class="description" path="password">password </form:label>
		<div>
			<form:input  type="password"  path="password" class="element text medium"  maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_3" >
		<form:label  class="description" path="nom">nom </form:label>
		<div>
			<form:input path="nom" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<form:label class="description" path="prenom">Prenom </form:label>
		<div>
			<form:input path="prenom" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		
		
		<!-- pays -->
		<li id="li_10" >
		<form:label class="description" path="adresse.pays">Pays </form:label>
		<div>
		<form:select class="element select medium"  path="adresse.pays"> 
			 
 <form:option value="France" selected="selected"></form:option>
   <c:forEach items="${countries }" var="option">
                              <form:option value="${option }">${option }</form:option>
                               
</c:forEach>
		</form:select>
		</div> 
		</li>	
		
		<!-- fin pays -->
		
		<form:hidden path="adresse.id"/>
		<form:hidden path="id"/>
			<li id="li_5" >
		<form:label class="description" path="adresse.ville">Ville </form:label>
		<div>
			<form:input path="adresse.ville" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_7" >
		<form:label class="description" path="adresse.voie">Voie </form:label>
		<div>
			<form:input path="adresse.voie" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_6" >
		<form:label class="description" path="adresse.codepostale">code postale </form:label>
		<div>
			<form:input path="adresse.codepostale" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_8" >
		<form:label class="description" path="adresse.telephone">Téléphone </form:label>
		<div>
			<form:input path="adresse.telephone" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_9" >
		<form:label class="description" path="adresse.portable">Portable </form:label>
		<div>
			<form:input path="adresse.portable" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>
			
					<li class="buttons">
			     
				<input id="saveForm" class="button_text" type="submit" name="submit" value="Modifier" />
		</li>
			</ul>
		</form:form>	
		 
	</div>
  </div>
 </div> 
</div> 
 
 
<script type="text/javascript" src="<c:url value="/js/htmltools/jquery-1.6.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/htmltools/jquery-ui.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/htmltools/skinable_tabs.min.js" />"></script>


 <script type="text/javascript">
  $('.tabs_holder').skinableTabs({
    effect: 'simple_fade',
    skin: 'skin1',
    position: 'top'
  });
</script>
</body>
</html>